<template>
    <div class="home-recommond">
        <h1>推荐歌单</h1>
        <div class="wrapper" ref="wrapper">
        <ul class="content" ref="content">
            <li v-for="(item,index) in listData" :key="index"
                @click="selectItem(item)">
                <div class="cover">
                    <van-image :src="item.cover" radius="1rem"/>
                    <span>{{item.listen_num | numFilter(1)}}万</span>
                </div>
                <span>{{item.title}}</span>
            </li>
        </ul>
    </div>
    </div>
</template>

<script>
// import BScroll from 'better-scroll'
import { betterScrollHorizontal } from "../../common/betterScroll.js";
export default {
    data(){
        return{
            listData:[]
        }
    },
   created(){
    this.getSongListData()
   },
methods:{
    getSongListData(){
        this.$request('get','/recommend/playlist/u')
    .then(res=>{
        console.log(res)
        if(res.result == 100){
            this.listData = res.data.list;
        }
        //异步数据的一些处理
    betterScrollHorizontal(
        this,
        this.$refs.wrapper,
        this.$refs.content,
        this.listData.length,
        10
        );
    })
    },
    
    selectItem(item){
        const id = item.content_id;
        console.log(id);
        // 1
        this.$router.push({path: `/songlist/${id}`})
        // 2
        // this.$router.push({
        //     name:"singlist",.
        
        //     params:{
        //         id:id
        //     }
        // });
    },
    
},
    // filters:{
    //     numFilter(value,num){
    //         return parseFloat(value/10000).toFixed(num)
    //     }
    // }
};
</script>

<style scoped>

.cover >span{
    position: absolute;
    right: 0.2rem;
    bottom: 0.4rem;
    background-color: white;
    font-size: 14px;
    border-radius: 1rem;
    display: inline-block;
}
.cover{
    position: relative;
}

.wrapper{
    width: 100%;
    overflow: hidden;
}
/*ul.content{
    width: calc(12*10rem);
}*/
ul.content li{
    display: inline-block;
    width: 10rem;
    vertical-align: top;
}
ul.content li * {
    margin: 0.1rem;
}
ul.content li>span{
    font-size: 0.8rem;
    color: #54493b;
}

</style>
